<template>
	<view class="container">
		<!-- 背景图片 -->
		<image :src="activity.img_arr.lo_bg" class="lo_bg"></image>
		<!-- Header -->
		<view class="header flex row-right" v-if="activity.length !== 0">
			<view class="choujiang-btn1 md" @click="goTo('/bundle/pages/luck_draw_code/luck_draw_code?id=')">
				<!-- 抽奖记录 -->
				<image :src="activity.img_arr.lo_re_btn" class="lo_re_btn" mode="widthFix"></image>
			</view>
		</view>

		<!-- Section -->
		<view class="section m-t-16">
			<view class="box-wrap">

				<!-- 中奖名单公示 -->
				<view class="notice flex" v-if="activity.show_winning_list">
					<image class="m-l-18" src="https://cdn.zkjialan.com/img1/choujinag_notice.png?v=1.0"></image>
					<view style="width: 90%; ">
						<u-notice-bar bg-color='none' :volume-icon="false" mode="horizontal" :list="list">
						</u-notice-bar>
					</view>
				</view>

				<!-- 抽奖信息 -->
				<view class="message flex row-between nr" v-if="activity.length != 0">
					<view style="color: #000000;font-weight: 700;">我的积分: {{activity.user_integral||'-'}}</view>
					<template v-if="activity.show_winning_list">
						<view class="flex" style="color: #000000;font-weight: 700;" @click="goTo('/bundle/pages/win_prize_code/win_prize_code?id=')">
							<image class="m-r-10" src="https://cdn.zkjialan.com/img1/choujiang_name_list.png?v=1.0"></image>
							中奖名单
						</view>
					</template>
				</view>

				<!-- 转盘 -->
				<view class="turntable" v-if="activity.length != 0">
					<my-turntable :ids="id" @finish="finish" :params="activity"></my-turntable>
				</view>

				<!-- 次数提示 -->
				<view class="num-tips nr" v-if="activity.length != 0">
					{{activity.limit||'-'}}
				</view>

				<!-- 活动规则 -->
				<view class="rule" v-if="activity.length != 0">
					<view class="lg bold">活动规则</view>
					<text class="sm" style="color: #000000;">{{activity.rule||'-'}}
					</text>
				</view>

				<view class="flex-1 flex row-center col-center" v-if="activity.length == 0"
					style="color: #000000;height: 61vh;">
					活动已失效
				</view>
			</view>
		</view>

		<!-- Footer -->
		<!--  <view class="footer">
            本活动的所有奖品，均由商城提供
        </view> -->


		<!-- Popup -->
		<u-popup v-model="showResult" mode="center">
			<view class="result-popup flex-col">
				<view class="result-container flex-col row-between">
					<image :src="activity.img_arr.pri_btn" class="pri_btn"></image>
					<view class="flex row-center" style="margin-top: 30rpx">
						<text style="color: #000000;font-size: 30rpx;text-align: center;">{{result.tips}}</text>
					</view>
					<image :src="result.image" class="resultImg"></image>
					<text
						style="color: #000000;font-size: 24rpx;text-align: center;margin-top: -60rpx">{{result.msg}}</text>
					<view class="m-b-20 flex row-center">
						<view class="get-btn flex row-center md br60" @click="showResult = false">
							<!-- 点击收下 -->
							<image :src="activity.img_arr.ac_btn" class="ac_btn"></image>
						</view>
					</view>
				</view>
				<view style="margin-top: 50rpx" @click="showResult = false">
					<u-icon name="close-circle" size="62" color="#fff"></u-icon>
				</view>
			</view>
		</u-popup>

		<!-- 页面状态 -->
		<page-status :status="pageStatus">
			<template #error>
				<u-empty :text="pageErrorMsg" src="https://cdn.zkjialan.com/img1/empty/order.png" :icon-size="280" />
			</template>
		</page-status>
	</view>
</template>

<script>
	import {
		apiLuckyDrawActivity,
		apiLuckyDrawWinningList
	} from "@/api/luck_draw.js"
	import myTurntable from '@/bundle/components/my-turntable/my-turntable.vue'
	export default {
		components: {
			myTurntable
		},
		data() {
			return {
				id: '',
				// 中奖名单的轮播
				list: [],
				// 活动的信息
				activity: {},
				// 抽奖结果
				result: "",
				// 弹窗控制
				showResult: false,
				// 页面的状态
				pageStatus: 'normal',
				pageErrorMsg: '',
				sharImage: ''
			}
		},

		onLoad() {
			this.$request.get(`shopapi/home/slideshow_list?type=18`).then(res => {
				console.log(res.data.data.lists[0].img_url)
				this.sharImage = res.data.data.lists[0].img_url;
			})
			try {
				const id = this.$Route.query.id
				this.id = id;
				console.log(id)
			} catch (e) {
				console.log(e)
				//TODO handle the exception
			}
		},
		onShow() {
			// 活动信息
			this.getLuckyDrawActivityFunc();
			// 中奖名单
			this.getLuckyDrawListFunc()
		},
		onShareAppMessage() {
			const {
				code
			} = this.userInfo
			const share = {
				title: '积分抽奖，下一锦鲤就是你！',
				path: `/bundle/pages/luck_draw/luck_draw?invite_code=${this.userInfo.code}`,
				imageUrl: this.sharImage
			}
			return share
		},
		methods: {
			// 活动信息
			async getLuckyDrawActivityFunc() {
				apiLuckyDrawActivity({
					id: this.id
				}).then(res => {
					this.activity = res;
				}).catch(err => {
					console.log(err)
					this.pageErrorMsg = err == '请求参数缺token' ? '请先登录' : err
					this.pageStatus = 'error'
				})
			},

			// 中奖名单
			async getLuckyDrawListFunc() {
				const res = await apiLuckyDrawWinningList({
					id: this.id,
					page_no: 1,
					page_size: 10
				})
				this.list = res.lists.map(item => item.title)
			},

			// 确认收下
			finish(e) {
				console.log(e)
				this.showResult = true;
				this.result = e.detail;
			},

			goTo(url, id) {
				uni.navigateTo({
					url: url + this.id
				})
			},
		}
	}
</script>

<style lang="scss">
	.u-type-warning{
		color: #000000 !important;
	}
	/* page {
		background-color: #FF2F46;
	} */

	.resultImg {
		width: 100px;
		height: 100px;
		margin: 0 auto;
		margin-top: -35px;
		border-radius: 10px !important;
		border: none !important;
	}

	.container {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		padding-top: 150rpx;

		.lo_bg {
			position: absolute;
			width: 100%;
			height: 100%;
			// height: 940rpx;
			top: 0;
			z-index: -1;
		}

		.header {
			.choujiang-btn1 {
				// color: #7D350C;
				// background-color: #FEF0B5;
				// border-radius: 40rpx 0 0 40rpx;
				// box-shadow: 0px 3px 10px #f95f2f;
				// padding: 18rpx 24rpx 20rpx 32rpx;
				.lo_re_btn{
					width: 176rpx;
					// height: 80rpx;
				}
			}
		}

		.section {
			padding: 0 30rpx;

			.box-wrap {
				width: 690rpx;
				padding: 27rpx 28rpx;
				border-radius: 30rpx;
				// background: #ed3720;
				// border: 12rpx solid #fe6847;

				// 中奖名单公示
				.notice {
					margin: 0 24rpx;
					height: 58rpx;
					padding: 12rpx 0;
					border-radius: 29rpx;
					background: #FEF8FF;
					border: 2rpx solid #000000;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				// 中奖信息奖品等
				.message {
					margin: 30rpx 10rpx;
					color: #FEF0B5;

					image {
						width: 28rpx;
						height: 30rpx;
					}
				}

				// 转盘
				.turntable {
					width: 610rpx;
					height: 610rpx;
					overflow: hidden;
					border-radius: 20rpx;
					padding: 35rpx 38rpx;
					background: url() no-repeat;
					background-size: 100% auto !important;
				}

				// 每日抽奖次数提示
				.num-tips {
					color: #000000;
					margin: 16rpx 0;
					text-align: center;
				}

				// 活动规则
				.rule {
					color: #000000;
					font-size: $-font-size-sm;
					padding: 30rpx 16rpx 0rpx 28rpx;
					border-radius: 20rpx;
					// background: #d30c16;
				}
			}
		}

		// Footer
		.footer {
			color: #FFF2D9;
			padding: 30rpx 0;
			text-align: center;
			font-size: $-font-size-xs;
		}

		// 弹窗
		.result-popup {
			text-align: center;
			width: 545rpx;
			height: 626rpx;

			.result-container {
				width: 545rpx;
				height: 514rpx;
				// background-size: 100% 100%;
				// background-image: url("https://cdn.zkjialan.com/img1/luck_draw_bg.png");
				.pri_btn{
					width: 545rpx;
					    height: 514rpx;
					    position: absolute;
					    z-index: -1;
						border-radius: 0 !important;
						border: none !important;
				}
			}

			image {
				border: 2rpx solid #fff;
				border-radius: 50%;
			}
		}

		// 按钮
		.get-btn {
			width: 320rpx;
			height: 70rpx;
			// color: #7B3200;
			// background: linear-gradient(180deg, #FEF0B0 0%, #FFA92E 100%);
			.ac_btn{
				width: 100%;
				height: 100%;
				border-radius: 0 !important;
				border: none !important;
			}
		}
	}
</style>